<template>
    <div class="container" :style="`height:${view.height}px;`">
      <el-card class="box-card">
        <h3 class="title">计算成果</h3>
        <!-- 设计参数 -->
        <el-card class="box-card">
          <h4>设计参数</h4>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="经度">
                <el-input :value="result.lon" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="纬度">
                <el-input :value="result.lat" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="水文分区">
                <el-input :value="result.area_name" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="流域面积 F (km²)">
                <el-input :value="result.f" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="干流长度 L (km)">
                <el-input :value="result.l" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="平均比降 J">
                <el-input :value="result.j" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="θ">
                <el-input :value="result.theta" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="汇流参数 m">
                <el-input :value="result.m" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
  
        <!-- 设计暴雨成果表 -->
        <el-card class="box-card">
          <h4>设计暴雨成果表</h4>
          <el-table :data="rainfallTable" style="width: 100%">
            <el-table-column prop="项目" label="项目" align="center" />
            <el-table-column v-for="(header, index) in rainfallHeaders" :key="index" :label="header" align="center">
              <template #default="scope">
                <div>{{ scope.row[header] }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
  
        <!-- 设计净雨成果表 -->
        <el-card class="box-card">
          <h4>设计净雨成果表</h4>
          <el-table :data="netRainTable" style="width: 100%">
            <el-table-column prop="频率" label="频率" align="center" />
            <el-table-column label="P" align="center" />
            <el-table-column label="Pa" align="center" />
            <el-table-column label="P+Pa" align="center" />
            <el-table-column label="R" align="center" />
          </el-table>
        </el-card>
  
        <!-- 设计洪水成果表 -->
        <el-card class="box-card">
          <h4>设计洪水成果表</h4>
          <el-table :data="floodTable" style="width: 100%">
            <el-table-column prop="频率" label="频率" align="center" />
            <el-table-column label="Qm (m³/s)" align="center" />
            <el-table-column label="τ (h)" align="center" />
            <el-table-column label="ψ" align="center" />
            <el-table-column label="n" align="center" />
          </el-table>
        </el-card>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted ,reactive} from "vue";
  import axios from "axios";
  
  // 定义接口响应数据类型
  interface ResultData {
    lon: number;
    lat: number;
    area_name: string;
    f: number;
    l: number;
    j: number;
    theta: number;
    m: number;
  }
  
  // 响应式变量存储接口返回的数据
  const result = ref<ResultData>({
    lon: 0,
    lat: 0,
    area_name: "",
    f: 0,
    l: 0,
    j: 0,
    theta: 0,
    m: 0,
  });
  
  // 表格数据
  const rainfallTable = ref([]);
  const rainfallHeaders = ["10分钟", "1小时", "6小时", "24小时"];
  const netRainTable = ref([]);
  const floodTable = ref([]);
  
  // 调用接口
  async function fetchResultData() {
    try {
      const response = await axios.get("/api/result", {
        params: {
          area: 1,
          lon: 110.5,
          lat: 35.5,
        },
      });
  
      // 模拟接口返回数据
      const data = response.data;
      result.value = {
        lon: data.lon,
        lat: data.lat,
        area_name: data.area_name,
        f: data.f,
        l: data.l,
        j: data.j,
        theta: data.theta,
        m: data.m,
      };
  
      rainfallTable.value = data.rainfallTable || [];
      netRainTable.value = data.netRainTable || [];
      floodTable.value = data.floodTable || [];
    } catch (error) {
      console.error("请求失败:", error);
    }
  }
  
  // 页面加载时请求数据
  onMounted(() => {
    fetchResultData();
  });


    // 动态调整视图高度
const view = reactive({
    height: window.innerHeight-200,
});
  </script>
  
  <style scoped>
  .container {
    padding: 20px;
    overflow: auto;
  }
  .box-card {
    margin-bottom: 20px;
  }
  .title {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
  }
  </style>
  